<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
        padding: 0;
        margin: 0;
        }

        body {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        background-color: #f1f3f5;

        }

        .page {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        }

        .descriptions {
        width: 100%;
        height: 78px;
        padding: 8px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 12px;
        box-sizing: border-box;
        margin-top: 96px;
        padding-left: 16px;
        }

        .title {
        color: rgba(0, 0, 0, 0.9);
        font-size: 30px;
        font-weight: 700;
        line-height: 40px;
        height: 40px;
        }

        .sub-title {
        color: rgba(0, 0, 0, 0.6);
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        }

        .video-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        box-sizing: border-box;
        }

        .img-subtitle {
        color: black;
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
        margin-top: 8px;
        }

        #myVideo {
        width: 100%;
        height: calc(100vw * 9 / 16);
        object-fit: contain;
        background-color: black;
        }
    </style>
</head>

<body>
<div class="page">
    <div class="descriptions">
        <div class="title">基于Web的视频处理</div>
        <div class="sub-title">长按以下视频体验Web视频处理功能</div>
    </div>
    <div class="video-box">
        <video id="myVideo" controls controlslist="nodownload noremoteplayback noplaybackrate">
            <source src="https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/28B76491E5988CFD48CA33EDDAF5D3D8B7407CF11958A53CFCC3CBC6DC31E270134D8ED/v3/M2000139681609568769/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4?accountinfo=LB1z4gNHXSUGUQwjknSFIwYJ6USHbz%2F3Mz5YkLmsBr8ikWk4PoTAd6WSY%2FWeOFhuvT0S7KOLpM8DBW0E0pT8FQ%3D%3D%3A20240621081001%3AUTC%2C%2C%2C20240621081001%2C%2C%2C-1%2C1%2C0%2C%2C%2C1%2C%2C%2C%2C1%2C%2C0%2C%2C%2C%2C%2C1%2CEND&GuardEncType=2&contentCode=M202406211662000139676022755842&spVolumeId=MP202406211662000139675603325440&server=mosplay-drcn.himovie.dbankcloud.cn&protocolType=1&formatPriority=504*%2C204*%2C2" type="video/mp4">
        </video>
        <span class="img-subtitle">(示例视频内容)</span>
    </div>
</div>

</body>

</html>